<template>
	<view class="content">
		<view class="lineTs">当前定位</view>
		<view class="topBOx">
			<view class="lineBox" v-if="areaName">
				<view class="lineTxt" @click="danqian">{{areaName}}</view>
			</view>
			<view class="lineBox" @click="getLocation">
				<view class="lineTxt">重新定位</view>
			</view>
		</view>
		<view class="lineTs">可选择的城市</view>
		<view class="topBOx">
			<!-- <view class="lineBox" v-for="key in Object.keys(CityMap)"  :key="item">
				<view class="lineTxt">{{CityMap[key]}}</view>
			</view> -->
			<view class="lineBox" v-for="(item,index) in CityMap"  :key="index" @click="ckCityFn(item)">
				<view class="lineTxt">{{item.areaName}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				CityMap: [],
				locationCity: {
					cityName: '',
					cityCode: '',
					lng: '',
					lat: '',
					areaCode:'',
					areaName:'',
				},
				areaName:'',
				ckCity:'',
			}
		},
		onLoad(opt) {
			this.areaName=opt.areaName
			 this.locationCity=uni.getStorageSync("locationCity")
			 this.ckCity=uni.getStorageSync("ckCity2")
            this.$http('jeecg-boot/app/market/bicProduct/getAreaList ', {
             
             },'POST').then(res => {
				 this.CityMap=res.result
			 })
		},
		methods: {
           ckCityFn(item){
			   console.log(item)
			   var ckCity={
			   	areaCode:item.areaCode,
			   	areaName:item.areaName,
			   	type:2
			   }
			  
			   uni.setStorageSync('ckCity', ckCity)
			   uni.navigateBack(-1)
		   },
		   danqian(){
			   this.ckCity.type=1
			   uni.setStorageSync('ckCity', this.ckCity)
			   uni.setStorageSync('locationCity', this.locationCity)
			   uni.navigateBack(-1)
		   },
		  getLocation() {
		  	   const that = this
		  		uni.authorize({
		  			scope: 'scope.userLocation',
		  			success() {
		  				uni.getLocation({
		  					type: 'gcj02',
		  					success: function(res) {
		  						console.log(res)
		  						that.locationCity.lng = res.longitude
		  						that.locationCity.lat = res.latitude
		  						uni.setStorageSync('location',that.locationCity )
		  						
		  						that.getAdress();
		  						
		  					},
		  					fail(err) {
		  						
		  					}
		  				});
		  			},
		  			fail: (err) => {
		  				
		  				 
		  			}})
		  		/* uni.getLocation({
		  		  type: 'gcj02',
		  		  success: (res) => {
		  			// 实际项目中可以通过逆地理编码获取具体地址
		  			this.locationText = '北京市朝阳区'
		  		  },
		  		  fail: () => {
		  			this.locationText = '定位失败，点击重试'
		  		  }
		  		}) */
		  	  },
		  	  getAdress() {
		  	  	// 根据经纬度 逆城市地理编码 获取城市信息
		  	  	var location = this.locationCity.lng + ',' + this.locationCity.lat
		  	  	uni.request({
		  	  		url: 'https://restapi.amap.com/v3/geocode/regeo',
		  	  		data: {
		  	  			key: 'f87da741974e48d8a634be5f802a11b1',
		  	  			location: location,
		  	  			//location: '117.06533,36.68013',
		  	  			//types: "190000",
		  	  			//extensions: "all",
		  	  			//radius: 100
		  	  		},
		  	  		dataType: "json",
		  	  		success: (res) => {
		  	  			console.log('定位城市', res);
		  	  			if(res.data.regeocode){
		  	  				console.log("城市名称")
		  	  				 console.log(res.data.regeocode.addressComponent.city)
		  	  				// console.log(res.data.pois[0].cityname)
		  	  				let cityname = res.data.regeocode.addressComponent.city+res.data.regeocode.addressComponent.district;
		  	  				var cityCode = res.data.regeocode.addressComponent.adcode
		  					this.locationCity.areaCode = cityCode
		  	  				cityCode = cityCode.slice(0, -2)
		  	  				cityCode = cityCode + '00'
		  	  				this.locationCity.cityName = cityname
		  	  				this.locationCity.cityCode = cityCode
		  					var ckCity={
		  						areaCode:cityCode,
		  						areaName:res.data.regeocode.addressComponent.city,
		  						type:2
		  					}
							this.ckCity=ckCity
							this.areaName=res.data.regeocode.addressComponent.city
		  					
		  	  			}else{
		  	  				console.log("接口获取失败")
		  	  			}
		  	  			
		  	  		}
		  	  	});
		  	  },
		}
	}
</script>

<style scoped>
.content{
	min-height: 100vh;
	background: #F4F5F7;
}
	.topBOx{
		display: flex;
		padding: 24rpx;
		flex-wrap: wrap;
	}
	.lineTxt{
		    padding: 0 16rpx;
		    height: 60rpx;
		    text-align: center;
		    line-height: 60rpx;
		  background: linear-gradient(to right, #4e8cff, #3a6cd9);
		    border-radius: 6rpx;
		    color: #fff;
	}
	.lineBox{
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}
	.lineTs{
		padding: 24rpx;color: #666666;font-size: 26rpx;
	}
</style>
